<template>
  <div class="choose-charts-style">
    <el-tabs v-model="tabsName" type="card" stretch="true" tab-position="left" size="mini">
      <el-tab-pane label="属性" name="0">
        <vxe-table ref="baseTree"  border show-overflow row-key :data="baseList" width max-height="400" row-id="id" text-algin="center" :key="isShow0">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text @change="changeBaseOpts($event, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeBaseOpts($event, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeBaseOpts($event, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeBaseOptsSelect($event, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值"  />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="X轴" name="1">
        <vxe-table ref="xAxisTree"  border show-overflow row-key resizable :auto-resize="true" :data="xAxisList" width max-height="400" row-id="id" text-algin="center"  :key="isShow1">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text  @change="changeXAxisOpts($event, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeXAxisOpts($event, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeXAxisOpts($event, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeXAxisOptsSelect($event, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值" />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="Y轴" name="2">
        <vxe-table ref="yAxisTree"  border show-overflow row-key resizable :auto-resize="true" :data="yAxisList" width max-height="400" row-id="id" text-algin="center"  :key="isShow2">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text  @change="changeYAxisOpts($event, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeYAxisOpts($event, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeYAxisOpts($event, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeYAxisOptsSelect($event, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值" />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="图例" name="3">
        <vxe-table ref="legendTree"  border show-overflow row-key resizable :auto-resize="true" :data="legendList" width max-height="400" row-id="id" text-algin="center"  :key="isShow3">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text  @change="changeLegendOpts($event, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeLegendOpts($event, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeLegendOpts($event, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeLegendOptsSelect($event, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值" />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="扩展" name="4">
        <vxe-table ref="extraTree"  border show-overflow row-key resizable :auto-resize="true" :data="extraList" width max-height="400" row-id="id" text-algin="center"  :key="isShow4">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text  @change="changeExtraOpts($event, scope.row.chartsType, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeExtraOpts($event, scope.row.chartsType, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeExtraOpts($event, scope.row.chartsType, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeExtraOptsSelect($event, scope.row.chartsType, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值" />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
      <el-tab-pane label="提示" name="5">
        <vxe-table ref="tooltipTree" border show-overflow row-key resizable :auto-resize="true" :data="tooltipList" width max-height="400" row-id="id" text-algin="center"  :key="isShow5">
          <vxe-table-column field="value" width="120" align="center" title="设置" slots="default">
            <template slot-scope="scope">
              <vxe-switch size="small" v-if="scope.row.type === 'bool'" v-model="scope.row.value" :inactive-value="false" :active-value="true" active-text inactive-text  @change="changeTooltipOpts($event, scope.row.name)"/>
              <vxe-input size="small" v-if="scope.row.type === 'text'" v-model="scope.row.value" value="scope.row.value" align="right" @blur="changeTooltipOpts($event, scope.row.name)"></vxe-input>
              <vxe-input size="small" v-if="scope.row.type === 'number'" v-model="scope.row.value" value="scope.row.value" type="number" align="right" @blur="changeTooltipOpts($event, scope.row.name)"></vxe-input>
              <el-select size="small" v-if="scope.row.type === 'select'" v-model="scope.row.value" @change="changeTooltipOptsSelect($event, scope.row.name)">
                <el-option v-for="item in scope.row.selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="desc" width="300" align="left" title="描述" />
          <vxe-table-column field="default" width="120" align="left" title="缺省值" />
          <vxe-table-column field="name" width="130" align="left" title="属性" />
        </vxe-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
